<!--
 * @Author: your name
 * @Date: 2021-09-14 15:58:54
 * @LastEditTime: 2021-09-16 22:47:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \more-money\src\components\money\numberPad.vue
-->
<template>
    <div class="pad-container">
        <div class="input-box flex flex-align-center">
            <Icon iconName="remark" />
            <span class="mar-l-4 nowrap">
                备注：
            </span>
            <input class="input-remark text-align-left" type="text" v-model="remark" placeholder="请输入备注">
            <span class="input-sum mar-l-4">{{output || 0}}</span>
        </div>
        <div class="calculator">
            <ul class="calcul-pad flex flex-wrap">
                <li class="calcul-btn" @click="clickBtn">1</li>
                <li class="calcul-btn" @click="clickBtn">2</li>
                <li class="calcul-btn" @click="clickBtn">3</li>
                <li class="calcul-btn" @click="operation('date')">
                   <Icon iconName="date" />
                    今天
                </li>
                <li class="calcul-btn" @click="clickBtn">4</li>
                <li class="calcul-btn" @click="clickBtn">5</li>
                <li class="calcul-btn" @click="clickBtn">6</li>
                <li class="calcul-btn" @click="operation('del')">
                    <Icon iconName="delete" />
                    删除
                </li>
                <li class="calcul-btn" @click="clickBtn">7</li>
                <li class="calcul-btn" @click="clickBtn">8</li>
                <li class="calcul-btn" @click="clickBtn">9</li>
                <li class="calcul-btn" @click="operation('clear')">
                    <Icon iconName="clear" />
                    清空
                </li>
                <li class="calcul-btn zero" @click="clickBtn">0</li>
                <li class="calcul-btn" @click="clickBtn">.</li>
                <li class="calcul-btn" @click="operation('submit')">
                    <Icon iconName="submit" />
                    完成
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';

@Component
export default class NumberPad extends Vue {
    private remark = '';
    private output = '0';
    private initData(){
        this.remark = '';
        this.output = '0';
    }
    private clickBtn(event: MouseEvent){
        const input = (event.target as HTMLLIElement).textContent!; //! 是表示必不为空
        if(this.output.length>4){
            return;
        }
        if(this.output === '0' && '0123456789'.indexOf(input)!==-1){
            this.output = input;
            return;
        }else if(this.output.indexOf('.')>0 && input === '.'){
            return;
        }else{
            this.output += input;
        }
    }
    private operation(type: string){
        switch(type){
            case 'del':
                this.output = this.output.slice(0,-1);
                break;
            case 'clear':
                this.output = '0';
                break;
            case 'submit':
                this.$emit('change',{remark:this.remark,amount:this.output});
                this.initData();
                break;
            default:
                break;
        }
    }
}
</script>

<style lang="scss">
.mar-l-4{
    margin-left: 4px;
}
.nowrap{
    white-space: nowrap;
}
.pad-container{
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 8px;
    background: linear-gradient(0deg, #feb23c 0%, #ffda44 100%);
    .input-box{
        width: 100%;
        padding: 0 16px;
        line-height: 32px;
        border: 1px solid rgba(85, 85, 85, 0.3);
        box-shadow: inset 0 4px 5px -5px rgba(85, 85, 85, 0.3),
                    inset 0 -4px 5px -5px rgba(85, 85, 85, 0.3);
        border-radius: 8px;
        background-color: #ffffff;

        .input-remark{
            border:none;
            width: 180px;
        }

        .input-sum{
            float: right;
            font-size: 32px;
            font-family: Consolas, monospace;
            flex-grow: 1;
        }
    }
    .calculator{
        margin-top: 8px;

        .calcul-pad{
            .calcul-btn{
                font-size: 18px;
                width:84px;
                height: 64px;
                line-height: 64px;
                text-align: center;
                background-color: #ffffff;
                border: 1px solid rgba(85, 85, 85, 0.3);
                border-radius: 8px;
                margin-right: 7px;
                margin-bottom: 4px;
                box-shadow:inset  0 -7px 5px -5px rgba(153, 153, 153, 0.4);

                &:nth-child(4), &:nth-child(8), &:nth-child(12), &:nth-child(15){
                    margin-right: 0;
                }
                &.zero{
                    width: 175px;
                }

                &:active{
                    background-color: #d3d3d3;
                }
            }
        }
    }
}
    
</style>
